<template>
	<view>
		<view @tap.stop="open"><slot></slot></view>
		<gui-popup ref="guipopupfordatetimebt" :zIndex="1" 
		position="bottom" :canCloseByShade="false">
			<view class="gui-bg-white">
				<view class="graceDateTime-header gui-flex gui-rows gui-space-between">
					<text class="graceDateTime-header-btn" 
					:style="{color:cancelTColor}" 
					@tap="close">{{cancelText}}</text>
					<text class="graceDateTime-header-btn" 
					:style="{textAlign:'right', color:confirmColor}" 
					@tap="confirm">{{confirmText}}</text>
				</view>
				<view>
					<text class="graceDateTimeBT-text gui-block-text">{{titles[0]}}</text>
				</view>
				<!-- 起始时间 -->
				<view>
					<gui-datetime-bt-base :value="startValue" @change="chang1"   
					:isTime="isTime" :isSecond="isSecond" 
					:startYear="startYear" :endYear="endYear" :units="units"></gui-datetime-bt-base>
				</view>
				<!-- 结束时间 -->
				<view class="gui-margin-top">
					<text class="graceDateTimeBT-text gui-block-text">{{titles[1]}}</text>
				</view>
				<view class="">
					<gui-datetime-bt-base :value="endValue" :isTime="isTime" @change="chang2" 
					:isSecond="isSecond" :startYear="startYear" :endYear="endYear" :units="units"></gui-datetime-bt-base>
				</view>
			</view>
		</gui-popup>
	</view>
</template>
<script>
export default {
	props: {
		cancelText    : { type : String,  default : '取消' },
		cancelTColor  : { type : String,  default : '#888888' },
		confirmText   : { type : String,  default : '确定' },
		confirmColor  : { type : String,  default : '#008AFF' },
		startValue    : { type : String , default : ''},
		endValue      : { type : String , default : ''},
		isTime        : { type : Boolean, default : true},
		isSecond      : { type : Boolean, default : true},
		startYear     : { type : Number,  default : 1980},
		endYear       : { type : Number,  default : 2050},
		units         : { type : Array ,  default : function(){return new Array('年','月','日','时','分','秒')}},
		titles        : { type : Array ,  default : function(){return new Array('开始时间','结束时间')}},
	},
	data() {
		return {
			indicatorStyle : 'height:35px',
			defaultVal     : [0,0,0,0,0,0],
			sDate:[[],[],[],[],[],[]],
			recDate:[[],[]]
		}
	},
	methods:{
		open : function () {
			this.$refs.guipopupfordatetimebt.open();
		},
		close : function () {
			this.$refs.guipopupfordatetimebt.close();
		},
		confirm : function(){
			this.$emit('confirm', this.recDate);
			this.close();
		},
		chang1 : function(res){
			this.recDate[0] = res;
		},
		chang2 : function(res){
			this.recDate[1] = res;
		},
	}
}
</script>
<style scoped>
.graceDateTime-header{padding:25rpx;}
.graceDateTime-header-btn{width:200rpx; line-height:38rpx; height:38rpx; font-size:28rpx;}
.graceDateTimeBT-text{padding:15rpx; background-color:#FFFFFF; line-height:80rpx; height:80rpx; color:rgba(69, 90, 100, 0.6); font-size:26rpx;}
</style>
